<template>
  <div>

    <carTitle :isShow1="isShow1" :isShow2="isShow2" :isShow3="isShow3">
      <span slot="title-one" class="title-one">录入运单</span>
      <span slot="title-two" class="title-two">录入运单说明说明</span>
    </carTitle>

    <div class="mycar-body">
      <el-row>
        <el-col :span="23" class="body-wrapper">
          <el-row id="head">
            <el-col :span="2" class="title-right">司机检索信息</el-col>
            <el-col :span="6">
              <el-input v-model="input" placeholder="请输入内容"></el-input>

            </el-col>
            <el-col :span="2">
              <el-button type="primary" icon="search" id="head_sou">搜索</el-button>
            </el-col>
          </el-row>
          <el-row id="body">
            <el-col :span="18">
              <el-row class="row">
                <el-col :span="4" class="b-l-title">承运司机信息</el-col>
                <el-col :span="20">
                  <span id="lang">
                    <el-input v-model="peotel" placeholder="请输入手机号" id="info-tel"></el-input><el-input v-model="cartel"
                                                                                                       placeholder="请输入车牌号"
                                                                                                       id="info-car"></el-input><el-input
                    v-model="namecar" placeholder="请输入司机姓名" id="info-name"></el-input>
                  </span>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="4" class="b-l-title">运单号</el-col>
                <el-col :span="9">
                  <el-input v-model="num" placeholder="请输入内容"></el-input>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="4" class="b-l-title">受票方</el-col>
                <el-col :span="9">
                  <el-input v-model="namea" placeholder="请输入内容"></el-input>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="4" class="b-l-title">发货人</el-col>
                <el-col :span="9">
                  <el-input v-model="peo" placeholder="请输入内容"></el-input>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="4" class="b-l-title">联系电话</el-col>
                <el-col :span="9">
                  <el-input v-model="tel" placeholder="请输入内容"></el-input>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="4" class="b-l-title">始发城市</el-col>
                <el-col :span="9">
                  <el-input v-model="star" placeholder="请输入详细地址"></el-input>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="4" class="b-l-title">收货人</el-col>
                <el-col :span="9">
                  <el-input v-model="peos" placeholder="请输入内容"></el-input>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="4" class="b-l-title">联系电话</el-col>
                <el-col :span="9">
                  <el-input v-model="telb" placeholder="请输入内容"></el-input>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="4" class="b-l-title">目的城市</el-col>
                <el-col :span="9">
                  <el-input v-model="end" placeholder="请输入详细地址"></el-input>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="4" class="b-l-title">货物名称</el-col>
                <el-col :span="9">
                  <el-input v-model="names" placeholder="请输入内容"></el-input>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="4" class="b-l-title">货物数量</el-col>
                <el-col :span="9">
                  <el-input v-model="amount" placeholder="请输入内容"></el-input>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="4" class="b-l-title">运单单价</el-col>
                <el-col :span="9">
                  <el-input v-model="pic" placeholder="请输入内容"></el-input>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="4" class="b-l-title">运费金额</el-col>
                <el-col :span="9">
                  <el-input v-model="picNum" placeholder="请输入内容"></el-input>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="4" class="b-l-title">司机运费</el-col>
                <el-col :span="9">
                  <el-input v-model="carpic" placeholder="请输入内容"></el-input>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="4" class="b-l-title">上传合同</el-col>
                <el-col :span="9">
                  <el-input v-model="pact" placeholder="请输入内容"></el-input>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="4" class="b-l-title">上传回单</el-col>
                <el-col :span="9">
                  <el-input v-model="rec" placeholder="请输入内容"></el-input>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="4" class="b-l-title">备注</el-col>
                <el-col :span="9">
                  <el-input
                    type="textarea"
                    autosize
                    placeholder="请输入内容"
                    v-model="comment">
                  </el-input>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="9" :offset="4">
                  <el-button type="success" id="btn1">保存运单</el-button>
                  <el-button id="btn2">清空</el-button>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6" id="body-right">
              <el-col :span="24" id="b-r-heade">
                企业历史运单
              </el-col>
              <el-col>
               <span class="b-r-body">
                  <!--<el-radio class="radio b-r-radio" v-model="radioa" label=""></el-radio>-->
                 <el-checkbox v-model="radioa" class="b-r-radio"></el-checkbox>
                 <span class="b-r-con">乌鲁木齐</span>
                 <img src="../assets/jt.png" alt="">
                 <span class="b-r-con">天津</span>
               </span>
              </el-col>
              <el-col>
               <span class="b-r-body">
                  <el-checkbox v-model="radiob" class="b-r-radio"></el-checkbox>
                 <span class="b-r-con">呼和浩特</span>
                 <img src="../assets/jt.png" alt="">
                 <span class="b-r-con">天津</span>
               </span>
              </el-col>
              <el-col>
               <span class="b-r-body">
                  <el-checkbox v-model="radioc" class="b-r-radio"></el-checkbox>
                 <span class="b-r-con">银川</span>
                 <img src="../assets/jt.png" alt="">
                 <span class="b-r-con">东营</span>
               </span>
              </el-col>
              <el-col>
               <span class="b-r-body">
                  <el-checkbox v-model="radiod" class="b-r-radio"></el-checkbox>
                 <span class="b-r-con">呼和浩特</span>
                 <img src="../assets/jt.png" alt="">
                 <span class="b-r-con">滨州</span>
               </span>
              </el-col>
            </el-col>
          </el-row>
        </el-col>

      </el-row>

    </div>
  </div>
</template>

<script>
  import carTitle from '@/components/car-title'
  import sel from '@/components/select'
  export default {
    data(){
      return {
        input: '',
        isShow1: false, isShow2: false, isShow3: true,
        radioa: 1, radiob: 1, radioc: 1, radiod: 1,
        peotel: '', cartel: '', namecar: '', peo: '', namea: '', tel: '', num: '', star: '', telb: '',
        peos: '', pic: '', amount: '', names: '', end: '', rec: '', pact: '', picNum: '', carpic: '',comment:'',
      }
    },
    components: {
      carTitle,
      sel
    }

  }
</script>
<style lang="scss">
  .title {
    padding: 35px 0 33px 30px;
    .title-one {
      font-size: 20px;
      line-height: 20px;
      font-weight: 700;
      color: #3149a9 !important;
    }
    .title-two {
      line-height: 20px;
      font-size: 14px;
      color: #8b9aaf;
    }
    i {
      font-size: 20px;
      font-weight: 700;
      color: #acafc2;
    }
  }

  .body-wrapper {
    background: #ffffff;
    margin-left: 30px;
    padding: 30px 15px;
    border: 1px solid #e7e8ed;
    .right-title {
      text-align: right;
      padding-right: 15px;
      line-height: 36px;
      height: 36px;
      font-weight: 800;
      color: #AEB5BF;
      font-size: 14px;
    }

  }

  td {
    height: 60px !important;
  }

  #share {
    margin-left: 20px;
  }

  #head {
    padding-bottom: 20px;
    border-bottom: 2px solid #ECEEF5;

  }

  #body {
    padding-top: 10px;
    .row {
      margin: 10px 0;
    }

  }

  #body-right {
    background-color: #FCF2F2;
    border: 1px solid #F2E5E5;
    height: 500px;
  }

  #head_sou {
    margin-left: 10px;
    height: 36px;
    color: #fff;
    i {
      color: #fff;
    }
  }

  .title-right {
    font-size: 14px;
    font-weight: 800;
    color: #92A0C7;
    line-height: 36px;
  }

  #b-r-heade {
    height: 30px;
    border-bottom: 1px solid #f2e5e5;
    font-size: 14px;
    font-weight: 800;
    line-height: 30px;
    text-indent: 10px;

  }

  .b-r-body {
    width: 90%;
    height: 30px;
    background-color: #fff;
    border: 1px solid #f2e5e5;
    display: block;
    margin: 5px auto;
    line-height: 30px;
    .b-r-radio {
      margin-left: 5px;
      border-radius: 50% !important;
      .el-checkbox__inner {
        border-radius: 50%;
      }
    }

    .b-r-con {
      width: 35%;
      display: inline-block;
      text-align: center;
    }
  }

  .b-l-title {
    text-align: right;
    font-size: 12px;
    font-weight: 800;
    color: #8B99B8;
    padding-right: 10px;
    line-height: 36px;
  }

  #info-tel {
    width: 40%;
    border-radius: 0;
    border-right: 1px solid #8391a5;
    input {
      border: 0;
    }
  }

  #info-car {
    width: 29%;
    border-radius: 0;
    border-right: 1px solid #8391a5;
    input {
      border: 0;
    }
  }

  #info-name {
    width: 29%;
    input {
      border: 0;
    }
  }

  #lang {
    border-radius: 4px;
    border: 1px solid #8391a5;
    height: 36px;
    display: inline-block;
    width: 65%;
  }
  #btn1{
    width: 55%;
  }
  #btn2{
    width: 40%;
  }

</style>
